{extend name="../../admin/view/main"}

{block name="button"}
{/block}

{block name="content"}
<div class="layui-tab layui-tab-card">

    <ul class="layui-tab-title notselect">
        {php}
        $types = ['ta' => '全部', 't1' => '未回复消息', 't2' => '未喷漆完成'];
        {/php}
        {foreach $types as $k=>$v}
            {if isset($type) and 't'.$type eq $k}
                <li class="layui-this" data-open="{:url('index')}?type={$k}">{$v}</li>
            {else}
                <li data-open="{:url('index')}?type={$k}">{$v}</li>
            {/if}
        {/foreach}
    </ul>

    <div class="layui-tab-content">
        {include file='record/car_record_city_owner/index_search'}
        <table class="layui-table margin-top-10" lay-skin="line">
            {notempty name='list'}
            <thead>
            <tr>
                <th class='nowrap'>ID</th>
                <th class='nowrap'>日期</th>
                <th class='nowrap'>司机信息</th>
                <th class='nowrap'>首次邀约情况</th>
                <th class='nowrap'>城市</th>
                <th class='nowrap'>状态</th>
                <th class='nowrap'>车辆信息</th>
                <th class='nowrap'>操作</th>
                <th class='nowrap'>广告覆盖情况</th>
                <th class='nowrap'>最近邀约情况</th>
                <th class='nowrap'>备注</th>
            </tr>
            </thead>
            {/notempty}
            <tbody>
            {foreach $list as $key=>$vo}
            <tr {if $vo.id eq input('show_id') } style="border: 2px solid red" {/if} >
                <td class='nowrap'>
                    <div><span class="color-text">{$vo.id|default='-'}</span></div>
                </td>
                <td class="nowrap">
                    <!--对接日期--><div>对接日期:{$vo.time_docking}</div>
                    <!--预计时间--><div>预计时间:{$vo.time_plan|format_date}</div>
                    <!--完成日期--><div>完成日期:{$vo.time_complete}</div>
                </td>
                <td class="nowrap">
                    <!--司机--><div>司机:{$vo.username}</div>
                    <!--车牌--><div>车牌:{$vo.plate_number}</div>
                    <!--电话--><div>电话:{$vo.phone}</div>
                </td>
                <td class="nowrap" data-tips-text="{$vo.invite_remark|default='-'}">
                    <!--首次邀约日期-->
                    <div>首次邀约日期: {$vo.time_invite}</div>
                    <!--首次邀约情况-->
                    <div>首次邀约情况: <span style="color: #0000FF">{$vo.invite_remark|mb_substr=0,20,'UTF-8'}</span></div>
                    <!--倒计时-->
                    {if !$vo.time_invite and $vo.paint_status != '1'}
                    {if $vo.remaining_timestamp <= 0}
                    <!--超过30分钟，红色，取消倒计时-->
                    <div style="color: #ff0000">倒计时: <span>超时</span></div>
                    {elseif $vo.remaining_timestamp > 0 and $vo.remaining_timestamp <= 900}
                    <!--超过15分钟，粉色，显示倒计时-->
                    <div style="color: #EC808D">倒计时: <span class="countdown" data-seconds="{$vo.remaining_timestamp}"></span></div>
                    {else}
                    <!--15分钟内，绿色，显示倒计时-->
                    <div style="color: #009688">倒计时: <span class="countdown" data-seconds="{$vo.remaining_timestamp}"></span></div>
                    {/if}
                    {/if}
                </td>
                <td class="nowrap">
                    <!--城市--><div>城市:{$vo.province}{$vo.city}{$vo.area}</div>
                    <!--归属城市--><div>归属城市:{$vo.city_owner}</div>
                    <!--城市负责人--><div>城市负责人:{$vo.name_city}</div>
                    <!--调度员--><div>调度员:{$vo.name_docking}</div>
                </td>

                <td class="nowrap">
                    <!--喷漆完成--><div>喷漆完成:{if $vo.paint_status eq 0}<span class="color-red">否</span>{elseif $vo.paint_status eq 1}<span class="color-green">是</span>{else}{/if}</div>
                    <!--尾部喷漆--><div>尾部喷漆:{if $vo.end_paint_status eq 0}<span class="color-red">否</span>{elseif $vo.end_paint_status eq 1}<span class="color-green">是</span>{else}{/if}</div>
                    <!--是否返工--><div>是否返工:{if $vo.is_rework eq 0}<span class="color-red">否</span>{elseif $vo.is_rework eq 1}<span class="color-green">是</span>{/if}</div>
                    <!--喷漆师傅--><div>喷漆师傅:{$vo.painter}</div>
                </td>
                <td class="nowrap">
                    <!--车型--><div>车型:{$vo.car_vehicle_type}</div>
                    <!--车身颜色--><div>车身颜色:{$vo.car_color}</div>
                </td>
                <td class="nowrap" forward>

                    <!--{if auth("edit")}-->
                    <a data-dbclick class="layui-btn layui-btn-sm layui-btn-primary" data-modal="{:url('edit')}?id={$vo.id}" data-width="900px">编 辑</a>
                    <!--{/if}-->
                </td>
                <td class="nowrap">
                    <!--覆盖几面--><div>覆盖几面:{$vo.cover_num}</div>
                    <!--是否有覆盖--><div>是否有覆盖:{if $vo.has_cover eq 0}<span class="color-red">否</span>{elseif $vo.has_cover eq 1}<span class="color-green">是</span>{else}{/if}</div>
                    <!--广告覆盖是否收费--><div>广告覆盖是否收费:{if $vo.ad_cover_fee eq 0}<span class="color-red">否</span>{elseif $vo.ad_cover_fee eq 1}<span class="color-green">是</span>{else}{/if}</div>
                    <!--覆盖收费--><div>覆盖收费:{$vo.cover_price}</div>
                </td>
                <td class="nowrap">
                    <!--最近邀约日期-->
                    <div>最近邀约日期:
                        {foreach $vo.time_invites as $time_invites}
                        <br/>{$time_invites}
                        {/foreach}
                    </div>
                    <!--最近邀约情况--><div>最近邀约情况:{$vo.invite_remarks}</div>
                </td>
                <td class="nowrap">
                    <!--备注--><div {if $vo.remark_show_red}class="color-red"{/if}>备注:{$vo.remark|default='暂无'}</div>
                    <!--原因分类--><div>原因分类:{$vo.analyze_reason_text|default='暂无'}</div>
                </td>


            </tr>
            {/foreach}
            </tbody>
        </table>
        {empty name='list'}<span class="notdata">没有记录哦</span>{else}{$pagehtml|raw|default=''}{/empty}
    </div>
</div>


<script>
    $(document).ready(function() {
        var countdownTimers = {}; // 用于存储倒计时定时器的对象

        function formatCountdown(seconds) {
            var minutes = Math.floor(seconds / 60);
            var remainingSeconds = seconds % 60;
            return minutes + ':' + (remainingSeconds < 10 ? '0' : '') + remainingSeconds;
        }

        function updateCountdown(element) {
            var seconds = parseInt($(element).data('seconds'));
            var threshold = parseInt($(element).data('threshold'));

            if (seconds <= 0) {
                $(element).text('超时');
                $(element).parent().css('color', '#ff0000');
            } else {
                $(element).text(formatCountdown(seconds));
                $(element).data('seconds', seconds - 1);
                if (seconds < 900) {
                    $(element).parent().css('color', '#EC808D');
                } else if (seconds >= 900) {
                    $(element).parent().css('color', '#009688');
                }
            }
        }

        function startCountdown(element) {
            var id = $(element).attr('id');

            countdownTimers[id] = setInterval(function() {
                updateCountdown(element);
            }, 1000);
        }

        function stopCountdown(element) {
            var id = $(element).attr('id');

            clearInterval(countdownTimers[id]);
        }

        // 页面加载时启动所有倒计时
        $('.countdown').each(function() {
            startCountdown(this);
        });
    });
</script>
{/block}

